<template>
  <div class="personnel_header">
    <div class="personnel_header_title">广州云为数据科技有限公司</div>
    <div class="personnel_header_subheading">提供员工的联系方式和所在部门</div>
  </div>
  <div class="personnelList">
    <div class="roleTree">
      <div class="tree_search">
        <el-input v-model="treeText" @input="enterInput" placeholder="请输入部门搜索" />
      </div>
      <div class="tree_body">
        <el-tree :indent="5" :default-expand-all="true" :data="data" ref="treeRef" node-key="id" :current-node-key="0"
          :props="defaultProps" :highlight-current="true" :expand-on-click-node="false" :filter-node-method="filterNode"
          @node-click="handleNodeClick">
          <template #default="{ node }">
            <div class="custom-tree-node">
              <div :class="[settingClass(node)]" v-if="node.level === 1">{{ node.label }}</div>
              <div :class="[settingClass(node)]" v-else>{{ node.label }}</div>
            </div>
          </template>
        </el-tree>
      </div>
    </div>
    <div class="personnelList_div">
      <div class="personnelList_div_body" ref="personnelListDivBody">
        <div>
          <div class="personnel_search" ref="personnelSearch">
            <el-form :inline="true" size="large" :model="formInline" class="demo-form-inline">
              <el-form-item>
                <el-radio-group v-model="formInline.status">
                  <el-radio-button :label="1">在职</el-radio-button>
                  <el-radio-button :label="2">离职</el-radio-button>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="关键字：">
                <el-input v-model="formInline.user" placeholder="请输入姓名" clearable />
              </el-form-item>

            </el-form>
          </div>
          <div class="personnel_list_body" :style="{ height: tableHeight + 'px' }">
            <div class="personnel_list_body_left">
              <div class="personnel_list">
                <img ref="imageRef" :src="state.imageSrc" alt="" />
                <div class="onePersonnel" :class="[data.sex === 1 ? 'onePersonnel_woman' : 'onePersonnel_man']"
                  v-for="(data, index) in tableData" :key="index">
                  <div class="onePersonnel_img">
                    <img v-if="data.sex === 1" src="@/assets/woman.png" alt="">
                    <img v-else src="@/assets/man.png" alt="">
                  </div>
                  <div class="personnel_content">
                    <div class="personnel_content_li">姓名：{{ data.name }}</div>
                    <div class="personnel_content_li">职务：{{ data.post }}</div>
                    <div class="personnel_content_li">所属部门：技术部</div>
                  </div>
                  <div class="onePersonnel_bg" @click="editPersonnelFun(data, $event)"></div>
                </div>
              </div>
            </div>
            <div class="personnel_list_body_right">
              <div class="oneLetter" v-for="(data, index) in letterArr" :key="index">{{ data }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="operate_div">
      <div class="operate_div_body">
        <el-divider content-position="left">新员工入职</el-divider>
        <div style="font-size: 14px;line-height:1.5;color: #ababab;margin-bottom: 15px">办理新员工入职</div>
        <el-button type="primary" size="large" style="width: 100%" @click="addPersonnelFun()">
          新员工入职
        </el-button>
        <el-divider content-position="left">单位</el-divider>
        <div style="font-size: 14px;line-height:1.5;color: #ababab;margin-bottom: 15px">快速预览部门组织架构</div>
        <el-button type="primary" size="large" style="width: 100%" @click="goOrganizational()">
          组织架构
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup name="personnel">
import { nextTick, onMounted, reactive, ref } from "vue";
// import * as ocr from "@paddlejs-models/ocr";
import personnel_data from "@/plugins/data/personnel_data";
import department from "@/plugins/data/department";
import router from "@/router";

const letterArr = reactive([
  'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', "J", 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
])

const treeText = ref(null)
const treeRef = ref(null)
const enterInput = () => {
  treeRef.value.filter(treeText.value)
}

const imageRef = ref(null)

const goOrganizational = () => {
  router.push('/organizational')
}

nextTick(() => {
  treeRef.value.setCheckedKeys([0], true)
})
const filterNode = (value, data) => {
  if (!value) return true
  return data.name.includes(value)
}

const tableHeight = ref(0)
const formInline = reactive({
  status: 1,
  userName: null,
  department: null,
  post: null
})

const addPersonnelFun = () => {
  router.push('/addPersonnel')
}

const editPersonnelFun = (data) => {
  router.push(`/editPersonnel?id=${data.id}`)
}

const data = reactive([
  {
    id: 0,
    name: '广州云为数据科技有限公司',
    children: department
  }
])

const tableData = ref([])

const getTableData = () => {
  tableData.value = personnel_data.getList()
  console.log(tableData.value)
}

getTableData()

const defaultProps = reactive({
  children: 'children',
  label: 'name',
})

function settingClass(node) {
  console.log(node.level)
  return node.level === 3 ? 'childCLass' : node.level === 2 ? 'parentClass' : ''
}

function handleNodeClick(data) {
  console.log(data)
}

const personnelListDivBody = ref(null)
const personnelSearch = ref(null)

// 浏览器窗口大小发生变化时重新计算table的高度
// window.onresize = () => getTableHeight()

function getTableHeight() {
  nextTick(() => {
    if (personnelListDivBody.value && personnelSearch.value) {
      tableHeight.value = personnelListDivBody.value.clientHeight - personnelSearch.value.clientHeight - 20
    }

  })
}

const state = reactive({
  imageSrc: "",
  lodingText: "加载中....",
  style: {
    display: "block",
  },
  ocrTexts: [],
});

onMounted(() => {
  // console.log("开始初始化...");
  // ocr.init().then(() => {
  //   console.log("初始化完成");
  // });
});

getTableHeight()
</script>

<style scoped lang="scss">
.personnel_header {
  width: 100%;
  height: 88px;
  margin-bottom: 10px;
  box-sizing: border-box;
  padding: 10px 20px 15px;
  background-color: #ffffff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  .personnel_header_title {
    width: 100%;
    height: auto;
    font-weight: 600;
    font-size: 24px;
    margin-bottom: 10px;

  }

  .personnel_header_subheading {
    width: 100%;
    height: auto;
    color: #ababab;
  }
}

.personnelList {
  width: 100%;
  height: calc(100% - 98px);
  display: flex;
  display: -webkit-flex;
  display: -moz-flex;



  .roleTree {
    width: 250px;
    flex-basis: 250px;
    flex-shrink: 0;
    box-sizing: border-box;
    padding: 10px;
    background-color: #ffffff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

    .tree_search {
      width: 100%;
      height: 35px;
    }

    .tree_body {
      width: 100%;
      box-sizing: border-box;
      padding-top: 10px;
      height: calc(100% - 35px);
      overflow: auto;
    }
  }

  .personnelList_div {
    width: calc(100% - 450px);
    flex-basis: calc(100% - 450px);
    flex-shrink: 0;
    height: 100%;
    box-sizing: border-box;
    padding-left: 10px;
    padding-right: 10px;

    .personnelList_div_body {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      padding: 10px 15px;
      background-color: #ffffff;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }
  }

  .operate_div {
    width: 200px;
    height: 100%;
    flex-basis: 200px;
    flex-shrink: 0;

    .operate_div_body {
      width: 100%;
      height: auto;
      box-sizing: border-box;
      padding: 10px 15px 20px;
      background-color: #ffffff;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }
  }
}

.personnel_list_body {
  width: 100%;
  height: auto;
  display: flex;
  display: -webkit-flex;
  display: -moz-flex;

  .personnel_list_body_left {
    width: calc(100% - 30px);
    flex-basis: calc(100% - 30px);
    flex-shrink: 0;
    height: 100%;
    overflow: auto;
  }

  .personnel_list_body_right {
    width: 30px;
    flex-basis: 30px;
    flex-shrink: 0;
    height: 100%;
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    overflow: auto;
    flex-wrap: wrap;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

    .oneLetter {
      width: 30px;
      cursor: pointer;
      color: #6a6666;
      height: auto;
      display: flex;
      box-sizing: border-box;
      background-color: #FFFFFF;
      display: -webkit-flex;
      display: -moz-flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      font-size: 14px;
      transition: background-color 0.5s, color 0.5s;
      -webkit-transition: background-color 0.5s, color 0.5s;

      &:hover {
        background-color: #148FFF;
        color: #FFFFFF;
      }
    }
  }
}

.personnel_list {
  width: 100%;
  height: auto;
  padding: 5px;
  display: flex;
  display: -webkit-flex;
  display: -moz-flex;
  gap: 15px;
  flex-wrap: wrap;
  box-sizing: border-box;

  .onePersonnel {
    width: 330px;
    height: 150px;
    padding: 10px;
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    box-sizing: border-box;
    background: #ffffff;
    cursor: pointer;
    position: relative;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.5s;

    &:hover {
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
    }

    .onePersonnel_bg {
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      position: absolute;
      background-color: transparent;
    }

    .onePersonnel_img {
      width: 100px;
      height: auto;
      flex-basis: 100px;
      flex-shrink: 0;
      box-sizing: border-box;
      padding-top: 10px;
      //background: #a4a4a4;

      &>img {
        width: 100%;
        height: auto;
      }
    }

    .personnel_content {
      width: 230px;
      flex-basis: 230px;
      flex-shrink: 0;
      box-sizing: border-box;
      padding-left: 20px;
      padding-top: 15px;

      .personnel_content_li {
        width: 100%;
        height: auto;
        overflow: hidden;
        white-space: nowrap;
        font-size: 14px;
        color: rgb(48, 49, 51);
        margin-bottom: 20px;
      }
    }
  }

  .onePersonnel_woman {
    border-top: 10px solid #6a6666;
  }

  .onePersonnel_man {
    border-top: 10px solid #6a6666;
  }
}

.parentClass {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  padding: 5px 20px 5px 0;
}


.childCLass {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  padding: 5px 10px 5px 10px;
  //border-bottom: 1px solid rgb(64, 158, 255);
  border-left: 1px solid #6a6666;
}

.pagination_body {
  width: 100%;
  height: 40px;
  display: flex;
  align-content: center;
  justify-content: flex-end;
}
</style>
<style lang="scss">
.personnelList {
  .el-button {
    border-radius: 0;

  }

  .el-button--primary {
    background-color: cornflowerblue;
  }

  .el-radio-button__original-radio:checked+.el-radio-button__inner {
    background-color: cornflowerblue;
  }
}
</style>
